<script setup>
import { ref } from 'vue'
import FanScrollView from '..'
import Button from '../../button/button.vue'

const list = Array.from({ length: 20 })
const colors = ['red', 'orange', 'yellow', 'green', 'cyan', 'blue', 'purple']
const getColor = (i) => colors[i % 7]

const scrollLeft = ref(0)
const onScroll = (e) => {
	// console.log('scroll view scrolling...', e)
}
const changeLeft = (plus = true) => {
	if (plus) scrollLeft.value += 100
	else scrollLeft.value -= 100
}
const onScrolltoupper = (val) => {
	console.log(val)
}
</script>

<template>
	<demo-block title="基础用法">
		<FanScrollView
			height="40px"
			scroll-with-animation
			scroll-x
			enable-flex
			:scroll-left="scrollLeft"
			@scroll="onScroll"
			@scrolltoupper="onScrolltoupper"
		>
			<div
				v-for="(a, index) in list"
				:key="index"
				:style="{ background: getColor(index), flex: 'none', width: '100px', height: '40px', margin: '0 10px' }"
			></div>
		</FanScrollView>
		<div>scrollLeft: {{ scrollLeft }}</div>
		<Button @click="changeLeft">scrollLeft+100</Button>
		<Button @click="changeLeft(false)">scrollLeft-100</Button>
	</demo-block>
</template>
